<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_商品列表练习</title>
</head>
<body>
<!--<input type="text" placeholder="请输入商品名称" id="i1">-->
<!--<input type="text" placeholder="请输入商品价格" id="i2">-->
<!--<input type="text" placeholder="请输入商品库存" id="i3">-->
<!--<button id="b1">添加</button>-->
<table border="1">
  <caption>商品列表</caption>
  <tr>
    <th>商品名称</th>
    <th>商品价格</th>
    <th>商品库存</th>
  </tr>
</table>
<script>
  //定义数组用来模拟从后端请求回来的数据
  const arr = [
    {title:"小米手机", price: 5000,num: 100},
    {title:"华为手机", price: 6000,num: 200},
    {title:"苹果手机", price: 7000,num: 300},
    {title:"三星手机", price: 8000,num: 400},
    {title:"OPPO手机", price: 9000,num: 500}
  ];
  let trE = document.createElement("tr");
  for (let i = 0; i < arr.length; i++) {
    let td1 = document.createElement("td");
    let td2 = document.createElement("td");
    let td3 = document.createElement("td");
    td1.innerHTML = arr[i].title;
    td2.innerHTML = arr[i].price;
    td3.innerHTML = arr[i].num;
    trE.append(td1);
    trE.append(td2);
    trE.append(td3);
    document.querySelector("table").append(trE);
    trE = document.createElement("tr");
  }
</script>
</body>
</html>
